<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>图片切换</title>
  <link href="./css/index.css" rel="stylesheet"/>
</head>
<body>

  <div id="mask">
    <div class="center">

      <h2 class="title">
        llhuang10
      </h2>

      <!--图片-->
      <img v-bind:src="imgArr[index]">
      <!--左箭头 -->
      <a @click="prev" class="left" href="javascript:void(0)" v-show="index !== 0">
        <img src="img/prev.png">
      </a>
      <!-- 右箭头 -->
      <a @click="next" class="right" href="javascript:void(0)" v-show="index < imgArr.length - 1">
        <img src="img/next.png">
      </a>
    </div>
  </div>


</body>
<!--<script src="js/vue.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>

  var app = new Vue({
    el: "#mask",
    data: {
      imgArr: [
        "img/github02.png",
        "img/github03.jpg",
        "img/github04.jpg",
        "img/github05.jpg"
      ],
      index: 0
    },
    methods: {
      prev: function () {
        // if (this.index === 0) {
        //     this.index = this.imgArr.length - 1;
        //     return;
        // }
        this.index--;
      },
      next: function () {
        // if (this.index === this.imgArr.length - 1) {
        //     this.index = 0;
        //     return;
        // }
        this.index++;
      }
    }

  });
</script>
</html>
